import React, { memo } from 'react';
import { Row, Col, Icon, Tooltip } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import styles from './Analysis.less';
import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from '@/components/Charts';
import Trend from '@/components/Trend';
import numeral from 'numeral';
import Yuan from '@/utils/Yuan';
import moment from 'moment';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};

const visitData = [];
const beginDay = new Date().getTime();

const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
for (let i = 0; i < fakeY.length; i += 1) {
  visitData.push({
    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
    y: fakeY[i],
  });
}


const IntroduceRow = memo(({ loading }) => (
  <Row gutter={24}>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title={<FormattedMessage id="app.analysis.total-acticles" defaultMessage="Total Acticles" />}
        action={
          <Tooltip
            title={<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce" />}
          >
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        loading={loading}
        total={numeral(1580).format('0,0')}
        footer={
          <Field
            label={<FormattedMessage id="app.analysis.day-acticles" defaultMessage="Daily Sales" />}
            value={numeral(100).format('0,0')}
          />
        }
        contentHeight={46}
      >
        {/*<Trend flag="up" style={{ marginRight: 16 }}>
          <FormattedMessage id="app.analysis.week" defaultMessage="Weekly Changes" />
          <span className={styles.trendText}>12%</span>
        </Trend>
        <Trend flag="down">
          <FormattedMessage id="app.analysis.day" defaultMessage="Daily Changes" />
          <span className={styles.trendText}>11%</span>
        </Trend>*/}
        <MiniArea color="#975FE4" data={visitData} />
      </ChartCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title={<FormattedMessage id="app.analysis.total-visits" defaultMessage="Visits" />}
        action = {
          <Tooltip
            title={<FormattedMessage id="app.analysis.day-visits" defaultMessage="Introduce" />}
          >
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total={numeral(8846).format('0,0')}
        footer = {
          <Field
            label={<FormattedMessage id="app.analysis.day-visits" defaultMessage="Daily Visits" />}
            value={numeral(500).format('0,0')}
          />
        }
        contentHeight={46}
      >
        <MiniArea color="#975FE4" data={visitData} />
      </ChartCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title={<FormattedMessage id="app.analysis.total-notices" defaultMessage="Total Notices" />}
        action={
          <Tooltip
            title={<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce" />}
          >
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total={numeral(6560).format('0,0')}
    		footer = {
          <Field
            label={<FormattedMessage id="app.analysis.day-notices" defaultMessage="Daily Visits" />}
            value={numeral(480).format('0,0')}
          />
       }
        contentHeight={46}
      >
        <MiniBar data={visitData} />
      </ChartCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        loading={loading}
        bordered={false}
        title={
          <FormattedMessage
            id="app.analysis.total-users"
            defaultMessage="Total Users"
          />
        }
        action={
          <Tooltip
            title={<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce" />}
          >
            <Icon type="info-circle-o" />
          </Tooltip>
        }
        total={numeral(7800).format('0,0')}
    		footer = {
          <Field
            label={<FormattedMessage id="app.analysis.day-users" defaultMessage="Daily Visits" />}
            value={numeral(430).format('0,0')}
          />
       	}
//      footer={
//        <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
//          <Trend flag="up" style={{ marginRight: 16 }}>
//            <FormattedMessage id="app.analysis.week" defaultMessage="Weekly Changes" />
//            <span className={styles.trendText}>12%</span>
//          </Trend>
//          <Trend flag="down">
//            <FormattedMessage id="app.analysis.day" defaultMessage="Weekly Changes" />
//            <span className={styles.trendText}>11%</span>
//          </Trend>
//        </div>
//      }
        contentHeight={46}
      >
        {/*<MiniProgress
          percent={78}
          strokeWidth={8}
          target={80}
          targetLabel={`${formatMessage({ id: 'component.miniProgress.tooltipDefault' }).concat(
            ': '
          )}80%`}
          color="#13C2C2"
        />*/}
        <MiniBar data={visitData} />
      </ChartCard>
    </Col>
  </Row>
));

export default IntroduceRow;
